<template>
  <div class="dashboard-container">
    <div class="app-container">
      <div slot="header">
        <h2>
          <p>{{ fullName }}</p>
          <p>{{ arr }}</p>
          <button @click="changeName">Change Name</button>
        </h2>
      </div>

    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: '马云',
      arr: ['1', '2', '3']
      // lastName: 'Doe'
    }
  },
  // 计算属性
  computed: {
    fullName() {
      console.log('fullName computed')
      return this.firstName
      // return `${this.firstName} ${this.lastName}`
    }
  },
  // 侦听器
  watch: {
    arr(newvalue, oldvalue) {
      console.log(newvalue, oldvalue)
    }
  },

  // 方法区域
  methods: {
    changeName() {
      this.firstName = '改变'
      this.arr[1] = '改变'
    }
  }

}
</script>

<style>

</style>
